<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>SuperheroAdmin - Bootstrap Admin Template</title>
	
	<!-- bootstrap -->
	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" />

	<!-- libraries -->
	<!-- <link href="css/libs/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" /> -->
	<link href="css/libs/font-awesome.css" type="text/css" rel="stylesheet" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="css/compiled/layout.css">
	<link rel="stylesheet" type="text/css" href="css/compiled/elements.css">

	<!-- this page specific styles -->
    <link rel="stylesheet" href="css/libs/fullcalendar.css" type="text/css" />
    <link rel="stylesheet" href="css/libs/fullcalendar.print.css" type="text/css" media="print" />
    <link rel="stylesheet" href="css/compiled/calendar.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/libs/morris.css" type="text/css" />
	<link rel="stylesheet" href="css/libs/daterangepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/libs/jquery-jvectormap-1.2.2.css" type="text/css" />
	
	<!-- Favicon -->
	<link type="image/x-icon" href="favicon.png" rel="shortcut icon"/>

	<!-- google font libraries -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>

	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<link href="css/libs/font-awesome-ie7.css" type="text/css" rel="stylesheet" />
	<![endif]-->
</head>
<body>
	<header class="navbar" id="header-navbar">
		<div class="container">
			<a href="index.html" id="logo" class="navbar-brand col-md-3 col-sm-3 col-xs-12">
				<img src="img/logo.png" alt=""/> <span>SuperheroAdmin</span>
			</a>
			
			<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
				<span class="sr-only">Toggle navigation</span>
				<span class="fa fa-bars"></span>
			</button>
			
			<div class="nav-no-collapse pull-right" id="header-nav">
				<ul class="nav navbar-nav pull-right">
					<li class="mobile-search">
						<a class="btn">
							<i class="fa fa-search"></i>
						</a>
						
						<div class="drowdown-search">
							<form role="search">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<i class="fa fa-search nav-search-icon"></i>
								</div>
							</form>
						</div>
						
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-warning"></i>
							<span class="count">8</span>
						</a>
						<ul class="dropdown-menu notifications-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item-header">You have 6 new notifications</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-comment"></i>
									<span class="content">New comment on ‘Awesome P...</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-plus"></i>
									<span class="content">New user registration</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-envelope"></i>
									<span class="content">New Message from George</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-shopping-cart"></i>
									<span class="content">New purchase</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-eye"></i>
									<span class="content">New order</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all notifications
								</a>
							</li>
						</ul>
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-envelope-o"></i>
							<span class="count">16</span>
						</a>
						<ul class="dropdown-menu notifications-list messages-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item first-item">
								<a href="#">
									<img src="img/samples/messages-photo-1.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											George Clooney
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-2.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Emma Watson
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-3.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Robert Downey Jr.
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all messages
								</a>
							</li>
						</ul>
					</li>
					<li class="hidden-xs">
						<a class="btn">
							<i class="fa fa-cog"></i>
						</a>
					</li>
					<li class="dropdown profile-dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<img src="img/samples/profile-photo.png" alt=""/>
							<span class="hidden-xs">Scarlett Johansson</span> <b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>
							<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
							<li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
							<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
						</ul>
					</li>
					<li class="hidden-xxs">
						<a class="btn">
							<i class="fa fa-power-off"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<div class="container">
		<div class="row">
			<div class="col-md-2" id="nav-col">
				<section id="col-left">
					<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">	
						<ul class="nav nav-pills nav-stacked">
							<li class="active">
								<a href="index.html">
									<i class="fa fa-dashboard"></i>
									<span>Dashboard</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-bar-chart-o"></i>
									<span>Graphs</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="graphs-xcharts.html">
											xCharts
										</a>
									</li>
									<li>
										<a href="graphs-flot.html">
											Flot
										</a>
									</li>
									<li>
										<a href="graphs-morris.html">
											Morris &amp; Mixed
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-users"></i>
									<span>Users</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="users.html">
											User list
										</a>
									</li>
									<li>
										<a href="user-profile.html">
											User profile
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-edit"></i>
									<span>Forms</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="form-elements.html">
											Form elements
										</a>
									</li>
									<li>
										<a href="form-wizard.html">
											Form wizard
										</a>
									</li>
									<li>
										<a href="form-wizard-popup.html">
											Form wizard popup
										</a>
									</li>
									<li>
										<a href="form-wysiwyg.html">
											WYSIWYG
										</a>
									</li>
									<li>
										<a href="form-ckeditor.html">
											WYSIWYG CKEditor
										</a>
									</li>
									<li>
										<a href="form-dropzone.html">
											Drop File Upload
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="tables.html">
									<i class="fa fa-table"></i>
									<span>Tables</span>
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-font"></i>
									<span>Typography</span>
								</a>
							</li>
							<li>
								<a href="calendar.html">
									<i class="fa fa-calendar"></i>
									<span>Calendar</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-star"></i>
									<span>Icons</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="icons-awesome.html">
											Awesome Icons
										</a>
									</li>
									<li>
										<a href="icons-halflings.html">
											Halflings
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-desktop"></i>
									<span>UI Elements</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="ui-elements.html">
											Elements
										</a>
									</li>
									<li>
										<a href="ui-nestable.html">
											Nestable
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="gallery.html">
									<i class="fa fa-picture-o"></i>
									<span>Gallery</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-folder-open"></i>
									<span>3 Level Menu</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											2nd Level
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-file-text-o"></i>
									<span>Extra pages</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="pricing.html">
											Pricing
										</a>
									</li>
									<li>
										<a href="login.html">
											Login
										</a>
									</li>
									<li>
										<a href="login-full.html">
											Login full
										</a>
									</li>
									<li>
										<a href="invoice.html">
											Invoice
										</a>
									</li>
									<li>
										<a href="emails.html">
											Emails
										</a>
									</li>
									<li>
										<a href="faq.html">
											FAQ
										</a>
									</li>
									<li>
										<a href="error-404.html">
											Error 404
										</a>
									</li>
									<li>
										<a href="error-404-v2.html">
											Error 404 Nested
										</a>
									</li>
									<li>
										<a href="error-500.html">
											Error 500
										</a>
									</li>
									<li>
										<a href="extra-grid.html">
											Grid
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</section>
			</div>
			<div class="col-md-10" id="content-wrapper">
				<div class="row">
					<div class="col-lg-12">
						
						<div class="row">
							<div class="col-lg-3 col-sm-6 col-xs-12">
								<div class="main-box infographic-box">
									<i class="fa fa-user red"></i>
									<span class="headline">Users</span>
									<span class="value">2.562</span>
								</div>
							</div>
							<div class="col-lg-3 col-sm-6 col-xs-12">
								<div class="main-box infographic-box">
									<i class="fa fa-shopping-cart emerald"></i>
									<span class="headline">Purchases</span>
									<span class="value">658</span>
								</div>
							</div>
							<div class="col-lg-3 col-sm-6 col-xs-12">
								<div class="main-box infographic-box">
									<i class="fa fa-money green"></i>
									<span class="headline">Income</span>
									<span class="value">&#36;12.400</span>
								</div>
							</div>
							<div class="col-lg-3 col-sm-6 col-xs-12">
								<div class="main-box infographic-box">
									<i class="fa fa-eye yellow"></i>
									<span class="headline">Monthly Visits</span>
									<span class="value">12.526</span>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<div class="clearfix">
										<h2 class="pull-left">Live Stats</h2>
										
  										<div id="reportrange" class="pull-right daterange-filter">
											<i class="icon-calendar"></i>
											<span></span> <b class="caret"></b>
										</div>
  									</div>
  									
  									<div class="row">
  										<div class="col-md-12">
											<div id="graph-line"></div>
										</div>
									</div>
									
									<div class="dashboard-stats clearfix">
  										<a href="#" class="col-xs-6 col-sm-3 chart-small">
  											<div class="headline">
  												New Orders
  											</div>
  											<div class="value">
  												8,846
  											</div>
 											<div id="graph-line-pageviews" class="chart-small-content"></div>
										</a>
  										<a href="#" class="col-xs-6 col-sm-3 chart-small">
  											<div class="headline">
  												Unique Visitors
  											</div>
  											<div class="value">
  												128,216
  											</div>
											<div id="graph-line-visits" class="chart-small-content"></div>
 										</a>
  										<a href="#" class="col-xs-6 col-sm-3 chart-small">
  											<div class="headline">
  												Avg. Support Time
  											</div>
  											<div class="value">
  												00:05:23
  											</div>
  											<div id="graph-line-avg-time" class="chart-small-content"></div>
  										</a>
  										<a href="#" class="col-xs-6 col-sm-3 chart-small last">
  											<div class="headline">
  												Abandoned Carts
  											</div>
  											<div class="value">
  												45.39%
  											</div>
 											<div id="graph-line-bounce" class="chart-small-content"></div>
  										</a>
  									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box clearfix">
									<div class="clearfix">
										<h2 class="pull-left">Last orders</h2>
										
										<div class="filter-block pull-right">
											<div class="form-group pull-left">
												<input type="text" class="form-control" placeholder="Search...">
												<i class="fa fa-search search-icon"></i>
											</div>
											
											<a href="#" class="btn btn-primary pull-right">
												<i class="fa fa-eye fa-lg"></i> View all orders
											</a>
										</div>
									</div>
									
									<div class="table-responsive clearfix">
										<table class="table table-hover">
											<thead>
												<tr>
													<th><a href="#"><span>Order ID</span></a></th>
													<th><a href="#" class="desc"><span>Date</span></a></th>
													<th><a href="#" class="asc"><span>Customer</span></a></th>
													<th class="text-center"><span>Status</span></th>
													<th class="text-right"><span>Price</span></th>
													<th>&nbsp;</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>
														<a href="#">#8002</a>
													</td>
													<td>
														2013/08/08
													</td>
													<td>
														<a href="#">Robert De Niro</a>
													</td>
													<td class="text-center">
														<span class="label label-success">Completed</span>
													</td>
													<td class="text-right">
														&dollar; 825.50
													</td>
													<td class="text-center" style="width: 15%;">
														<a href="#" class="table-link">
															<span class="fa-stack">
																<i class="fa fa-square fa-stack-2x"></i>
																<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
															</span>
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">#5832</a>
													</td>
													<td>
														2013/08/08
													</td>
													<td>
														<a href="#">John Wayne</a>
													</td>
													<td class="text-center">
														<span class="label label-warning">On hold</span>
													</td>
													<td class="text-right">
														&dollar; 923.93
													</td>
													<td class="text-center" style="width: 15%;">
														<a href="#" class="table-link">
															<span class="fa-stack">
																<i class="fa fa-square fa-stack-2x"></i>
																<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
															</span>
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">#2547</a>
													</td>
													<td>
														2013/08/08
													</td>
													<td>
														<a href="#">Anthony Hopkins</a>
													</td>
													<td class="text-center">
														<span class="label label-info">Pending</span>
													</td>
													<td class="text-right">
														&dollar; 1.625.50
													</td>
													<td class="text-center" style="width: 15%;">
														<a href="#" class="table-link">
															<span class="fa-stack">
																<i class="fa fa-square fa-stack-2x"></i>
																<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
															</span>
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">#9274</a>
													</td>
													<td>
														2013/08/08
													</td>
													<td>
														<a href="#">Charles Chaplin</a>
													</td>
													<td class="text-center">
														<span class="label label-danger">Cancelled</span>
													</td>
													<td class="text-right">
														&dollar; 35.34
													</td>
													<td class="text-center" style="width: 15%;">
														<a href="#" class="table-link">
															<span class="fa-stack">
																<i class="fa fa-square fa-stack-2x"></i>
																<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
															</span>
														</a>
													</td>
												</tr>
												<tr>
													<td>
														<a href="#">#8463</a>
													</td>
													<td>
														2013/08/08
													</td>
													<td>
														<a href="#">Gary Cooper</a>
													</td>
													<td class="text-center">
														<span class="label label-success">Completed</span>
													</td>
													<td class="text-right">
														&dollar; 34.199.99
													</td>
													<td class="text-center" style="width: 15%;">
														<a href="#" class="table-link">
															<span class="fa-stack">
																<i class="fa fa-square fa-stack-2x"></i>
																<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
															</span>
														</a>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<ul class="pagination pull-right">
										<li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
										<li><a href="#">1</a></li>
										<li class="active"><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">4</a></li>
										<li><a href="#">5</a></li>
										<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-6">
								<div class="main-box clearfix">
									<h2>Conversation</h2>
									
									<div class="conversation-wrapper">
										<div class="conversation-content">
											<div class="conversation-inner">
											
												<div class="conversation-item item-left clearfix">
													<div class="conversation-user">
														<img src="img/samples/ryan.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Ryan Gossling
														</div>
														<div class="time hidden-xs">
															September 21, 2013 18:28
														</div>
														<div class="text">
															I don't think they tried to market it to the billionaire, spelunking, 
															base-jumping crowd.
														</div>
													</div>
												</div>
												<div class="conversation-item item-right clearfix">
													<div class="conversation-user">
														<img src="img/samples/kunis.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Mila Kunis
														</div>
														<div class="time hidden-xs">
															September 21, 2013 12:45
														</div>
														<div class="text">
															The path of the righteous man is beset on all sides by the iniquities of the 
															selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
															good will.
														</div>
													</div>
												</div>
												<div class="conversation-item item-right clearfix">
													<div class="conversation-user">
														<img src="img/samples/kunis.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Mila Kunis
														</div>
														<div class="time hidden-xs">
															September 21, 2013 12:45
														</div>
														<div class="text">
															The path of the righteous man is beset on all sides by the iniquities of the 
															selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
															good will.
														</div>
													</div>
												</div>
												<div class="conversation-item item-left clearfix">
													<div class="conversation-user">
														<img src="img/samples/ryan.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Ryan Gossling
														</div>
														<div class="time hidden-xs">
															September 21, 2013 18:28
														</div>
														<div class="text">
															I don't think they tried to market it to the billionaire, spelunking, 
															base-jumping crowd.
														</div>
													</div>
												</div>
												<div class="conversation-item item-right clearfix">
													<div class="conversation-user">
														<img src="img/samples/kunis.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Mila Kunis
														</div>
														<div class="time hidden-xs">
															September 21, 2013 12:45
														</div>
														<div class="text">
															The path of the righteous man is beset on all sides by the iniquities of the 
															selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
															good will.
														</div>
													</div>
												</div>
												<div class="conversation-item item-right clearfix">
													<div class="conversation-user">
														<img src="img/samples/kunis.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Mila Kunis
														</div>
														<div class="time hidden-xs">
															September 21, 2013 12:45
														</div>
														<div class="text">
															The path of the righteous man is beset on all sides by the iniquities of the 
															selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
															good will.
														</div>
													</div>
												</div>
												<div class="conversation-item item-left clearfix">
													<div class="conversation-user">
														<img src="img/samples/ryan.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Ryan Gossling
														</div>
														<div class="time hidden-xs">
															September 21, 2013 18:28
														</div>
														<div class="text">
															I don't think they tried to market it to the billionaire, spelunking, 
															base-jumping crowd.
														</div>
													</div>
												</div>
												<div class="conversation-item item-right clearfix">
													<div class="conversation-user">
														<img src="img/samples/kunis.png" alt=""/>
													</div>
													<div class="conversation-body">
														<div class="name">
															Mila Kunis
														</div>
														<div class="time hidden-xs">
															September 21, 2013 12:45
														</div>
														<div class="text">
															The path of the righteous man is beset on all sides by the iniquities of the 
															selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
															good will.
														</div>
													</div>
												</div>
												
											</div>
										</div>
										<div class="conversation-new-message">
											<form>
												<div class="form-group">
													<textarea class="form-control" rows="2" placeholder="Enter your message..."></textarea>
												</div>
												
												<div class="clearfix">
													<button type="submit" class="btn btn-success pull-right">Send message</button>
												</div>
											</form>
										</div>
									</div> 
								</div>
							</div>
							
							<div class="col-lg-6">
								<div class="main-box clearfix">
									
									<div class="tabs-wrapper">
										<div class="clearfix">
											<h2 class="pull-left">Recent updates</h2>
											<ul class="nav nav-tabs pull-right">
												<li class="active"><a href="#tab-users" data-toggle="tab">Users</a></li>
												<li><a href="#tab-products" data-toggle="tab">Products</a></li>
												<li><a href="#tab-todo" data-toggle="tab">Todo</a></li>
											</ul>
										</div>
										
										<div class="tab-content">
											<div class="tab-pane fade in active" id="tab-users">
												<ul class="widget-users row">
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/scarlet.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">Scarlett Johansson</a>
															</div>
															<div class="time">
																<i class="fa fa-clock-o"></i> Last online: 5 minutes ago
															</div>
															<div class="type">
																<span class="label label-danger">Admin</span>
															</div>
														</div>
													</li>
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/kunis.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">Mila Kunis</a>
															</div>
															<div class="time online">
																<i class="fa fa-check-circle"></i> Online
															</div>
															<div class="type">
																<span class="label label-warning">Pending</span>
															</div>
														</div>
													</li>
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/ryan.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">Ryan Gossling</a>
															</div>
															<div class="time online">
																<i class="fa fa-check-circle"></i> Online
															</div>
														</div>
													</li>
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/robert.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">Robert Downey Jr.</a>
															</div>
															<div class="time">
																<i class="fa fa-clock-o"></i> Last online: Thursday
															</div>
														</div>
													</li>
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/emma.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">Emma Watson</a>
															</div>
															<div class="time">
																<i class="fa fa-clock-o"></i> Last online: 1 week ago
															</div>
														</div>
													</li>
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/george.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">George Clooney</a>
															</div>
															<div class="time">
																<i class="fa fa-clock-o"></i> Last online: 1 month ago
															</div>
														</div>
													</li>
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/kunis.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">Mila Kunis</a>
															</div>
															<div class="time online">
																<i class="fa fa-check-circle"></i> Online
															</div>
															<div class="type">
																<span class="label label-warning">Pending</span>
															</div>
														</div>
													</li>
													<li class="col-md-6">
														<div class="img">
															<img src="img/samples/ryan.png" alt=""/>
														</div>
														<div class="details">
															<div class="name">
																<a href="#">Ryan Gossling</a>
															</div>
															<div class="time online">
																<i class="fa fa-check-circle"></i> Online
															</div>
														</div>
													</li>
												</ul>
												<br/>
												<a href="#" class="btn btn-success pull-right">View all users</a>
											</div>
											
											<div class="tab-pane fade" id="tab-products">
												<ul class="widget-products">
													<li>
														<a href="#">
															<span class="img">
																<img src="img/samples/ipad.png" alt=""/>
															</span>
															
															<span class="product clearfix">
																<span class="name">
																	iPad mini 32GB WiFi Black&Slate
																</span>
																<span class="price">
																	<i class="fa fa-money"></i> &dollar;320,00
																</span>
																<span class="warranty">
																	<i class="fa fa-certificate"></i> Warranty: 2 years
																</span>
															</span>
														</a>
													</li>
													<li>
														<a href="#">
															<span class="img">
																<img src="img/samples/ipad.png" alt=""/>
															</span>
															
															<span class="product clearfix">
																<span class="name">
																	iPad mini 16GB WiFi Black&Slate
																</span>
																<span class="price">
																	<i class="fa fa-money"></i> &dollar;273,68
																</span>
																<span class="warranty">
																	<i class="fa fa-certificate"></i> Warranty: 2 years
																</span>
															</span>
														</a>
													</li>
													<li>
														<a href="#">
															<span class="img">
																<img src="img/samples/ipad.png" alt=""/>
															</span>
															
															<span class="product clearfix">
																<span class="name">
																	iPad mini 32GB WiFi Cellular Black&Slate
																</span>
																<span class="price">
																	<i class="fa fa-money"></i> &dollar;447,29
																</span>
																<span class="warranty">
																	<i class="fa fa-certificate"></i> Warranty: 4 years
																</span>
															</span>
														</a>
													</li>
													<li>
														<a href="#">
															<span class="img">
																<img src="img/samples/ipad.png" alt=""/>
															</span>
															
															<span class="product clearfix">
																<span class="name">
																	iPad mini 32GB WiFi Cellular Black&Slate
																</span>
																<span class="price">
																	<i class="fa fa-money"></i> &dollar;447,29
																</span>
																<span class="warranty">
																	<i class="fa fa-certificate"></i> Warranty: 4 years
																</span>
															</span>
														</a>
													</li>
												</ul>
												<br/>
												<a href="#" class="btn btn-success pull-right">View all users</a>
											</div>
											
											<div class="tab-pane fade" id="tab-todo">
												<ul class="widget-todo">
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-1" />
																<label for="todo-1">
																	New products introduction <span class="label label-danger">High Priority</span>
																</label>
															</div>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-2" />
																<label for="todo-2">
																	Checking the stock <span class="label label-success">Low Priority</span>
																</label>
															</div>
														</div>
														<div class="actions">
															<a href="#" class="table-link">
																<i class="fa fa-pencil"></i>
															</a>
															<a href="#" class="table-link danger">
																<i class="fa fa-trash-o"></i>
															</a>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-3" checked="checked" />
																<label for="todo-3">
																	Buying coffee <span class="label label-warning">Medium Priority</span>
																</label>
															</div>
														</div>
														<div class="actions">
															<a href="#" class="table-link">
																<i class="fa fa-pencil"></i>
															</a>
															<a href="#" class="table-link danger">
																<i class="fa fa-trash-o"></i>
															</a>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-4" />
																<label for="todo-4">
																	New marketing campaign <span class="label label-success">Low Priority</span>
																</label>
															</div>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-5" />
																<label for="todo-5">
																	Calling Mom <span class="label label-warning">Medium Priority</span>
																</label>
															</div>
														</div>
														<div class="actions">
															<a href="#" class="table-link badge">
																<i class="fa fa-cog"></i>
															</a>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-6" />
																<label for="todo-6">
																	Ryan's birthday <span class="label label-danger">High Priority</span>
																</label>
															</div>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-7" />
																<label for="todo-7">
																	Printing new flyer <span class="label label-success">Low Priority</span>
																</label>
															</div>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-8" />
																<label for="todo-8">
																	Mila and Ryan wedding <span class="label label-danger">High Priority</span>
																</label>
															</div>
														</div>
													</li>
													<li class="clearfix">
														<div class="name">
															<div class="checkbox-nice">
																<input type="checkbox" id="todo-9" />
																<label for="todo-9">
																	Checking the stock <span class="label label-success">Low Priority</span>
																</label>
															</div>
														</div>
													</li>
												</ul>
											</div>
											
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-md-6">
								<div class="main-box">
									<div id="calendar"></div>
								</div>
							</div>
							
							<div class="col-md-6">
								<div class="main-box">
									<div class="clearfix">
										<h2 class="pull-left">Visitors location</h2>
										
										<div class="icon-box pull-right">
											<a href="#" class="btn pull-left">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="#" class="btn pull-left">
												<i class="fa fa-cog"></i>
											</a>
										</div>
									</div>
									
									<div id="world-map" style="width: 100%; height: 400px"></div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer-bar">
		<p id="footer-copyright">
			&copy; 2014 <a href="http://www.adbee.sk/" target="_blank">Adbee digital</a>. Powered by SuperheroAdmin.
		</p>
	</footer>
	
	<!-- global scripts -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
	<!-- this page specific scripts -->
	<script src="js/jquery-ui.custom.min.js"></script>
	<script src="js/fullcalendar.min.js"></script>
	<script src="js/jquery.slimscroll.min.js"></script>
	<script src="js/raphael-min.js"></script>
	<script src="js/morris.min.js"></script>
	<script src="js/moment.min.js"></script>
	<script src="js/daterangepicker.js"></script>
	<script src="js/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="js/jquery-jvectormap-world-merc-en.js"></script>
	<script src="js/gdp-data.js"></script>
	
	<!-- theme scripts -->
	<script src="js/scripts.js"></script>
	
	<!-- this page specific inline scripts -->
	<script>
	$(document).ready(function() {
		
		/* initialize the external events
		-----------------------------------------------------------------*/
	
		$('#external-events div.external-event').each(function() {
		
			// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
			// it doesn't need to have a start or end
			var eventObject = {
				title: $.trim($(this).text()) // use the element's text as the event title
			};
			
			// store the Event Object in the DOM element so we can get to it later
			$(this).data('eventObject', eventObject);
			
			// make the event draggable using jQuery UI
			$(this).draggable({
				zIndex: 999,
				revert: true,      // will cause the event to go back to its
				revertDuration: 0  //  original position after the drag
			});
			
		});
	
	
		/* initialize the calendar
		-----------------------------------------------------------------*/
		
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		var calendar = $('#calendar').fullCalendar({
			header: {
				left: '',
				center: 'title',
				right: 'prev,next'
			},
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
				var title = prompt('Event Title:');
				if (title) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
				calendar.fullCalendar('unselect');
			},
			editable: true,
			droppable: true, // this allows things to be dropped onto the calendar !!!
			drop: function(date, allDay) { // this function is called when something is dropped
			
				// retrieve the dropped element's stored Event Object
				var originalEventObject = $(this).data('eventObject');
				
				// we need to copy it, so that multiple events don't have a reference to the same object
				var copiedEventObject = $.extend({}, originalEventObject);
				
				// assign it the date that was reported
				copiedEventObject.start = date;
				copiedEventObject.allDay = allDay;
				
				// copy label class from the event object
				var labelClass = $(this).data('eventclass');
				
				if (labelClass) {
					copiedEventObject.className = labelClass;
				}
				
				// render the event on the calendar
				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
				$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
				
				// is the "remove after drop" checkbox checked?
				if ($('#drop-remove').is(':checked')) {
					// if so, remove the element from the "Draggable Events" list
					$(this).remove();
				}
				
			},
			buttonText: {
				prev: '<i class="fa fa-chevron-left"></i>',
				next: '<i class="fa fa-chevron-right"></i>'
			},
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1),
					className: 'label-success'
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false,
					className: 'label-danger'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false,
					className: 'label-info'
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false,
					className: 'label-success'
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false,
					className: 'label-info'
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/',
					className: 'label-danger'
				}
			]
		});
		
	    $('.conversation-inner').slimScroll({
	        height: '340px',
	        alwaysVisible: false,
	        railVisible: true,
	        wheelStep: 5,
	        allowPageScroll: false
	    });
	    
	    
	    //CHARTS
		graphLine = Morris.Area({
			element: 'graph-line',
			data: [
				{period: '2014-01-01', iphone: 2666, ipad: null, itouch: 2647},
				{period: '2014-01-02', iphone: 2778, ipad: 2294, itouch: 2441},
				{period: '2014-01-03', iphone: 4912, ipad: 1969, itouch: 2501},
				{period: '2014-01-04', iphone: 3767, ipad: 3597, itouch: 5689},
				{period: '2014-01-05', iphone: 6810, ipad: 1914, itouch: 2293},
				{period: '2014-01-06', iphone: 5670, ipad: 4293, itouch: 1881},
				{period: '2014-01-07', iphone: 4820, ipad: 3795, itouch: 1588},
				{period: '2014-01-08', iphone: 15073, ipad: 5967, itouch: 5175},
				{period: '2014-01-09', iphone: 10687, ipad: 4460, itouch: 2028},
				{period: '2014-01-10', iphone: 8432, ipad: 5713, itouch: 1791}
			],
			lineColors: ['#77ab49', '#d5ac08', '#dd504c', '#3fcfbb', '#626f70', '#8f44ad'],
			xkey: 'period',
			ykeys: ['iphone', 'ipad', 'itouch'],
			labels: ['iPhone', 'iPad', 'iPod Touch'],
			pointSize: 3,
			hideHover: 'auto'
		});
	    
		pageviews = Morris.Area({
			element: 'graph-line-pageviews',
			data: [
				{period: '2014-01-01', iphone: 2666},
				{period: '2014-01-02', iphone: 2778},
				{period: '2014-01-03', iphone: 4912},
				{period: '2014-01-04', iphone: 3767},
				{period: '2014-01-05', iphone: 6810},
				{period: '2014-01-06', iphone: 5670},
				{period: '2014-01-07', iphone: 4820},
				{period: '2014-01-08', iphone: 15073},
				{period: '2014-01-09', iphone: 10687},
				{period: '2014-01-10', iphone: 8432}
			],
			lineColors: ['#3fcfbb', '#77ab49', '#d5ac08', '#626f70', '#dd504c', '#8f44ad'],
			xkey: 'period',
			ykeys: ['iphone'],
			labels: ['iphones'],
			axes: false,
			grid: false,
			pointSize: 0,
			lineWidth: 2,
			hideHover: 'always'
		});
		lineVisits = Morris.Area({
			element: 'graph-line-visits',
			data: [
				{period: '2014-01-01', iphone: 2666},
				{period: '2014-01-02', iphone: 2778},
				{period: '2014-01-03', iphone: 4912},
				{period: '2014-01-04', iphone: 13767},
				{period: '2014-01-05', iphone: 6810},
				{period: '2014-01-06', iphone: 5670},
				{period: '2014-01-07', iphone: 4820},
				{period: '2014-01-08', iphone: 5073},
				{period: '2014-01-09', iphone: 687},
				{period: '2014-01-10', iphone: 432}
			],
			lineColors: ['#3fcfbb', '#77ab49', '#d5ac08', '#626f70', '#dd504c', '#8f44ad'],
			xkey: 'period',
			ykeys: ['iphone'],
			labels: ['iphones'],
			axes: false,
			grid: false,
			pointSize: 0,
			lineWidth: 2,
			hideHover: 'always'
		});
		lineAvg = Morris.Area({
			element: 'graph-line-avg-time',
			data: [
				{period: '2014-01-01', iphone: 12666},
				{period: '2014-01-02', iphone: 12778},
				{period: '2014-01-03', iphone: 8912},
				{period: '2014-01-04', iphone: 3767},
				{period: '2014-01-05', iphone: 6810},
				{period: '2014-01-06', iphone: 5670},
				{period: '2014-01-07', iphone: 4820},
				{period: '2014-01-08', iphone: 15073},
				{period: '2014-01-09', iphone: 10687},
				{period: '2014-01-10', iphone: 8432}
			],
			lineColors: ['#3fcfbb', '#77ab49', '#d5ac08', '#626f70', '#dd504c', '#8f44ad'],
			xkey: 'period',
			ykeys: ['iphone'],
			labels: ['iphones'],
			axes: false,
			grid: false,
			pointSize: 0,
			lineWidth: 2,
			hideHover: 'always'
		});
		lineBounce = Morris.Area({
			element: 'graph-line-bounce',
			data: [
				{period: '2014-01-01', iphone: 2666},
				{period: '2014-01-02', iphone: 2778},
				{period: '2014-01-03', iphone: 4912},
				{period: '2014-01-04', iphone: 3767},
				{period: '2014-01-05', iphone: 6810},
				{period: '2014-01-06', iphone: 5670},
				{period: '2014-01-07', iphone: 4820},
				{period: '2014-01-08', iphone: 5073},
				{period: '2014-01-09', iphone: 5687},
				{period: '2014-01-10', iphone: 8432}
			],
			lineColors: ['#3fcfbb', '#77ab49', '#d5ac08', '#626f70', '#dd504c', '#8f44ad'],
			xkey: 'period',
			ykeys: ['iphone'],
			labels: ['iphones'],
			axes: false,
			grid: false,
			pointSize: 0,
			lineWidth: 2,
			hideHover: 'always'
		});
		
		$(window).smartresize(function(){
			graphLine.redraw();
			pageviews.redraw();
			lineVisits.redraw();
			lineBounce.redraw();
			lineAvg.redraw();
		});
	    
		//DateRange
		$('#reportrange').daterangepicker({
				startDate: moment().subtract('days', 29),
				endDate: moment(),
				minDate: '01/01/2012',
				maxDate: '12/31/2014',
				dateLimit: { days: 60 },
				showDropdowns: true,
				showWeekNumbers: true,
				timePicker: false,
				timePickerIncrement: 1,
				timePicker12Hour: true,
				ranges: {
					'Today': [moment(), moment()],
					'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
					'Last 7 Days': [moment().subtract('days', 6), moment()],
					'Last 30 Days': [moment().subtract('days', 29), moment()],
					'This Month': [moment().startOf('month'), moment().endOf('month')],
					'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
				},
				opens: 'left',
				buttonClasses: ['btn btn-default'],
				applyClass: 'btn-small btn-primary',
				cancelClass: 'btn-small',
				format: 'MM/DD/YYYY',
				separator: ' to ',
				locale: {
					applyLabel: 'Submit',
					fromLabel: 'From',
					toLabel: 'To',
					customRangeLabel: 'Custom Range',
					daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
					monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
					firstDay: 1
				}	
			},
			function(start, end) {
				console.log("Callback has been called!");
				$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
			}
		);
		//Set the initial state of the picker label
		$('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

		//WORLD MAP
		$('#world-map').vectorMap({
			map: 'world_merc_en',
			backgroundColor: '#ffffff',
			zoomOnScroll: false,
			regionStyle: {
				initial: {
					fill: '#e1e1e1',
					stroke: 'none',
					"stroke-width": 0,
					"stroke-opacity": 1
				},
				hover: {
					"fill-opacity": 0.8
				},
				selected: {
					fill: '#8dc859'
				},
				selectedHover: {
				}
			},
			series: {
				regions: [{
					values: gdpData,
					scale: ['#b1fff6', '#02a794'],
					normalizeFunction: 'polynomial'
				}]
			},
			onRegionLabelShow: function(e, el, code){
				el.html(el.html()+' ('+gdpData[code]+')');
			}
		});
	});
	</script>
	
</body>
</html>